<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style/common.css">
    <link rel="stylesheet" href="./style/index.css">
    <link rel="stylesheet" href="./style/swiper.min.css">
    <link rel="stylesheet" href="./style/swiper-bundle.min.css">
    <title>Document</title>
</head>
<style>
   
</style>

<body>
    <div id="app">

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!-- 第一个页面 -->
                <div class="swiper-slide">
                    <div class="p">
                        <div class="person_web">
                            <div class="header">
                                <div class="logo">logo</div>
                                <div class="switch">
                                    <img @click="btnSwitch" src="./image/common/switch.png" alt="">
                                </div>
                            </div>
                            <div class="center" v-if="isShow">
                                <div class="written_words">
                                    <img class="jian" src="./image/home/见.png" alt="">
                                    <img class="ji" src="./image/home/即.png" alt="">
                                    <img class="suo" src="./image/home/所.png" alt="">
                                    <img class="de" src="./image/home/得.png" alt="">
                                    <img class="nihao" src="./image/home/欢迎，我是xxx.png" alt="">
                                    <img class="introduce" src="./image/home/现任职于郑州的UI设计师.png" alt="">
                                </div>
                                <div class="picture">
                                    <img src="./image/home/Rectangle 2.png" alt="">
                                </div>
                                <div class="mine">
                                    <div class="about_me"><span>关于我</span></div>
                                    <div class="my_worker"></div>
                                    <div class="contact_me"></div>
                                </div>
                            </div>
                            <div class="switch_center" v-if="!isShow">
                                <div class="details">
                                    <div class="home">Home <span class="line"></span> <span class="homepage">主页</span>
                                    </div>
                                    <div class="opus">Opus <span class="line"></span> <span class="homepage">作品</span>
                                    </div>
                                    <div class="contact">Contact <span class="line"></span> <span
                                            class="homepage">联系我</span></div>
                                </div>
                                <div class="understand">About</div>
                            </div>
                            <div class="footer">
                                <div class="explain">ALIMAMA MUX, powered by alimama THX.</div>
                                <div class="icon">
                                    <span class="img1"></span>
                                    <span class="img2"></span>
                                    <span class="img3"></span>
                                    <span class="img4"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 第二个页面 -->
                <div class="swiper-slide">
                    <div class="p">
                        <div class="person_web">
                            <div class="header">
                                <div class="logo">logo</div>
                                <div class="switch">
                                    <img @click="btnSwitch" src="./image/common/switch.png" alt="">
                                </div>
                            </div>
                            <div class="center" v-if="isShow">
                                <div class="written_words">
                                   <img src="./image/works/Group 2.png" alt="">
                                </div>
                                <div class="picture" style="margin-left: 15%;">
                                    <div class="swiper mySwiper">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide swiper-slide_style">Slide 1</div>
                                            <div class="swiper-slide swiper-slide_style">Slide 2</div>
                                            <div class="swiper-slide swiper-slide_style">Slide 3</div>
                                            <div class="swiper-slide swiper-slide_style">Slide 4</div>
                                            <div class="swiper-slide swiper-slide_style">Slide 5</div>
                                            <div class="swiper-slide swiper-slide_style">Slide 6</div>
                                            <div class="swiper-slide swiper-slide_style">Slide 7</div>
                                            <div class="swiper-slide swiper-slide_style">Slide 8</div>
                                            <div class="swiper-slide swiper-slide_style">Slide 9</div>
                                        </div>
                                        <div class="swiper-button-next"></div>
                                        <div class="swiper-button-prev"></div>
                                    </div>
                                </div>
                                <div class="composition">
                                    <div class="about_me"></div>
                                    <div class="my_worker"><span>作品</span> </div>
                                    <div class="contact_me"></div>
                                </div>
                            </div>
                            <div class="switch_center" v-if="!isShow">
                                <div class="details">
                                    <div class="home">Home <span class="line"></span> <span class="homepage">主页</span>
                                    </div>
                                    <div class="opus">Opus <span class="line"></span> <span class="homepage">作品</span>
                                    </div>
                                    <div class="contact">Contact <span class="line"></span> <span
                                            class="homepage">联系我</span></div>
                                </div>
                                <div class="understand">About</div>
                            </div>
                            <div class="footer">
                                <div class="explain">ALIMAMA MUX, powered by alimama THX.</div>
                                <div class="icon">
                                    <span class="img1"></span>
                                    <span class="img2"></span>
                                    <span class="img3"></span>
                                    <span class="img4"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 第三个页面 -->
                <div class="swiper-slide">
                    <div class="p">
                        <div class="person_web">
                            <div class="header">
                                <div class="logo">logo</div>
                                <div class="switch">
                                    <img @click="btnSwitch" src="./image/common/switch.png" alt="">
                                </div>
                            </div>
                            <div class="center" v-if="isShow">
                                <div class="written_words">
                                   <img src="./image/works/contact.png" alt="">
                                </div>
                                <div class="picture">
                                    <img src="./image/works/联系我.jpg" alt="">
                                </div>
                                <div class="relate">
                                    <div class="about_me"></div>
                                    <div class="my_worker"></div>
                                    <div class="contact_me"><span>联系我</span></div>
                                </div>
                            </div>
                            <div class="switch_center" v-if="!isShow">
                                <div class="details">
                                    <div class="home">Home <span class="line"></span> <span class="homepage">主页</span>
                                    </div>
                                    <div class="opus">Opus <span class="line"></span> <span class="homepage">作品</span>
                                    </div>
                                    <div class="contact">Contact <span class="line"></span> <span
                                            class="homepage">联系我</span></div>
                                </div>
                                <div class="understand">About</div>
                            </div>
                            <div class="footer">
                                <div class="explain">ALIMAMA MUX, powered by alimama THX.</div>
                                <div class="icon">
                                    <span class="img1"></span>
                                    <span class="img2"></span>
                                    <span class="img3"></span>
                                    <span class="img4"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>


<!-- Swiper JS -->
<script src="./js/swiper.min.js"></script>
<script src="./js/swiper-bundle.min.js"></script>
<script src="./js/vue-2.6.12.js"></script>
<script>
    //main.js
    let app = new Vue({
        el: '#app',
        data: {
            isShow: true,
        },
        watch: {
        },
        methods: {
            btnSwitch() {
                this.isShow = !this.isShow
            }
        },
        created() {
        },
        computed: {},
    });

</script>
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        followFinger: false,
        speed: 800,
        mousewheel: true,
        on: {
            init: function (swiper) {
                slide = this.slides.eq(0);
                slide.addClass('ani-slide');
            },
            transitionStart: function () {
                for (i = 0; i < this.slides.length; i++) {
                    slide = this.slides.eq(i);
                    slide.removeClass('ani-slide');
                }
            },
            transitionEnd: function () {
                slide = this.slides.eq(this.activeIndex);
                slide.addClass('ani-slide');

            },
        }
    });
    var swiper1 = new Swiper(".mySwiper", {
			effect: "cards",
			grabCursor: true,
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev",
			},
		});
</script>

</html>